import React, {Component} from 'react';
import './index.less';
import {
    base,
    cacheTools
} from 'nc-lightapp-front';

const {NCCheckbox, NCSelect, NCInput} = base;

class SearchTop extends Component {
    constructor(props) {
        super(props);
        this.state = {
            json: props.json,
        };
    }

    componentWillReceiveProps(nextprops) {
        let nextjson = JSON.stringify(nextprops.json);
        let thisjson = JSON.stringify(this.props.json);
        if (nextjson !== thisjson) {
            this.setState({
                json: nextprops.json
            })
        }
    }

    componentDidMount() {

    }

    onchange = (key, val) => {
        let keysArr = ['termFromStr', 'contTermStr', 'termToStr', 'propFromStr', 'contPropStr', 'propToStr'];
        if (keysArr.includes(key) && (isNaN(val) || val > 9999)) {
            return false
        }

        let obj = {};
        if (key === 'termOperator') {
            obj.termFromStr = "";
            obj.contTermStr = "";
            obj.termToStr = "";
        }
        if (key === 'propOperator') {
            obj.propFromStr = "";
            obj.contPropStr = "";
            obj.propToStr = "";
        }
        this.props.updateState({
            [key]: val,
            ...obj
        })
    };

    render() {
        const selectData = [
            {
                key: this.state.json["cm6011-000075"],
                value: '1'
            },
            {
                key: this.state.json["cm6011-000076"],
                value: '2'
            },
            {
                key: this.state.json["cm6011-000077"],
                value: '3'
            },
            {
                key: this.state.json["cm6011-000078"],
                value: '4'
            },
            {
                key: this.state.json["cm6011-000079"],
                value: '5'
            },
            {
                key: this.state.json["cm6011-000080"],
                value: '6'
            }
        ];
        const selectUnitData = [
            {
                key: this.state.json["cm6011-000081"],
                value: '1'
            },
            {
                key: this.state.json["cm6011-000082"],
                value: '2'
            },
            {
                key: this.state.json["cm6011-000017"],
                value: '3'
            }
        ];
        return (
            <div className="search-top-area">
                <div>
                    <div className={'checkbox'}>
                        <NCCheckbox checked={this.props.onemonthend} onChange={val => {
                            this.onchange('onemonthend', val)
                        }}>{this.state.json['cm6011-000084']}</NCCheckbox>{/* 国际化处理： 从今日起两个月内劳动合同即将到期的人员*/}
                        <NCCheckbox checked={this.props.querylast} onChange={val => {
                            this.onchange('querylast', val)
                        }}>{this.state.json['cm6011-000086']}</NCCheckbox>{/* 国际化处理： 仅查最新纪录*/}
                    </div>
                    <div className={'contract-term'}>
                        <div className={'contract-term-item'}>
                            <div className={'contract-unit'}>
                                <span>{this.state.json['cm6011-000085']}</span>
                                <NCSelect
                                    className={'select-box'}
                                    onChange={(val) => {
                                        this.onchange('termOperator', val);
                                    }}
                                    value={this.props.termOperator}
                                    data={selectData}
                                />
                            </div>
                            <div className={'contract-time'}>
                                {this.props.termOperator === '1' ? <div>
                                    <NCInput type="text" value={this.props.termFromStr} onChange={val => {
                                        this.onchange('termFromStr', val)
                                    }}/>
                                    <NCInput type="text" value={this.props.termToStr} onChange={val => {
                                        this.onchange('termToStr', val)
                                    }}/>
                                </div> : <div>
                                    <NCInput type="text" value={this.props.contTermStr} onChange={val => {
                                        this.onchange('contTermStr', val)
                                    }}/>
                                </div>}
                            </div>
                            <div className={'contract-unit'}>
                                <span>{this.state.json['cm6011-000087']}</span>
                                <NCSelect
                                    className={'select-box'}
                                    onChange={(val) => {
                                        this.onchange('termUint', val);
                                    }}
                                    value={this.props.termUint}
                                    data={selectUnitData}
                                />
                            </div>
                        </div>
                        <div className={'contract-term-item'}>
                            <div className={'contract-unit'}>
                                <span>{this.state.json['cm6011-000088']}</span>
                                <NCSelect
                                    className={'select-box'}
                                    onChange={(val) => {
                                        this.onchange('propOperator', val);
                                    }}
                                    value={this.props.propOperator}
                                    data={selectData}
                                />
                            </div>
                            <div className={'contract-time'}>
                                {this.props.propOperator === '1' ? <div>
                                    <NCInput type="text" value={this.props.propFromStr} onChange={val => {
                                        this.onchange('propFromStr', val)
                                    }}/>
                                    <NCInput type="text" value={this.props.propToStr} onChange={val => {
                                        this.onchange('propToStr', val)
                                    }}/>
                                </div> : <div>
                                    <NCInput type="text" value={this.props.contPropStr} onChange={val => {
                                        this.onchange('contPropStr', val)
                                    }}/>
                                </div>}
                            </div>
                            <div className={'contract-unit'}>
                                <span>{this.state.json['cm6011-000087']}</span>
                                <NCSelect
                                    className={'select-box'}
                                    onChange={(val) => {
                                        this.onchange('propUint', val);
                                    }}
                                    value={this.props.propUint}
                                    data={selectUnitData}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default SearchTop;
